////////////////////////////////////////////
// 这里实现标签页的切换
////////////////////////////////////////////

function initSwitchTab() {
    // 1. 先获取到相关的元素(标签页的按钮, 会话列表, 好友列表)
    let tabSession = document.querySelector('.tab .tab-session');
    let tabFriend = document.querySelector('.tab .tab-friend');
    // querySelectorAll 可以同时选中多个元素. 得到的结果是个数组
    // [0] 就是会话列表
    // [1] 就是好友列表
    let lists = document.querySelectorAll('.list');
    // 2. 针对标签页按钮, 注册点击事件. 
    //    如果是点击 会话标签按钮, 就把会话标签按钮的背景图片进行设置. 
    //    同时把会话列表显示出来, 把好友列表隐藏
    //    如果是点击 好友标签按钮, 就把好友标签按钮的背景图片进行设置. 
    //    同时把好友列表显示出来, 把会话列表进行隐藏
    tabSession.onclick = function() {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话.png)';
        tabFriend.style.backgroundImage = 'url(img/用户2.png)';
        // b) 让会话列表显示出来, 让好友列表进行隐藏
        lists[0].classList = 'list';
        lists[1].classList = 'list hide';
    }

    tabFriend.onclick = function() {
        // a) 设置图标
        tabSession.style.backgroundImage = 'url(img/对话2.png)';
        tabFriend.style.backgroundImage = 'url(img/用户.png)'
        // b) 让好友列表显示, 让会话列表隐藏
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}

initSwitchTab();

//////////////////////////////////////////////
// 从服务器中获取到用户登录数据
//////////////////////////////////////////////
function getUserInfo(){
    $.ajax({
        type:'get',
        url:'/userInfo',
        success:function(body){
            // 从服务器获取数据
            // 校验结果是否有效
            if(body.userId && body.userId > 0){
            // 如果有效，将用户名显示到界面上
            // 同时也可以记录 userId 到 html 标签的属性中（以后备用）
            let userDiv = document.querySelector('.main .left .user');
            userDiv.innerHTML = body.username;
            userDiv.setAttribute("user-id", body.userId);
            }else{
            // 如果结果无效 当前未登录 跳转至登陆页面
            alert("当前用户未登录");
            location.assign('/login.html');
            }

        }
    });
}

getUserInfo();

function getFriendList(){
    $.ajax({
        type:'get',
        url:'/friendList',
        success:function(body){
            // 1. 先把之前的好友列表的内容清空
            let friendListUL = document.querySelector('#friend-list');
            friendListUL.innerHTML = '';
            // 2. 遍历 body，把服务器响应的结果加回到当前的 friend-list 中
            for(let friend of body){
                let li = document.createElement('li');
                li.innerHTML = '<h4>'+ friend.friendName+'</h4>';
                // 此处把 friend 也记录下来，以后备用
                // 把 friengId 作为一个 html 的自定义属性，加到 li 属性上就可以了
                li.setAttribute('friend-id', friend.friendId);
                friendListUL.appendChild(li);
            }
        },
        error:function(){
            console.log("获取好友列表失败！");
        }
    });
}

getFriendList();

function getSessionList(){
    $.ajax({
        type:'get',
        url:'sessionList',
        success:function(body){
            // 1. 清空之前的会话列表
            let sessionListUL = document.querySelector("#session-list");
            sessionListUL.innerHTML = '';
            // 2. 遍历响应的数组，针对结果来构造页面
            for(let session of body){
                // 针对lastMessage 的长度进行截断处理
                if(session.lastMessage.length > 10){
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }

                let li = document.createElement('li');
                // 把会话 id 保留到 li 标签的自定义属性中
                li.setAttribute('message-session-id', session.sessionId);
                // 针对会话的标题这里，简化处理。
                // 单纯的只是使用了第 0 个对话中用户的名字作为会话标题，并没有考虑群聊的情况
                li.innerHTML = '<h3>' + session.friends[0].friendName + '<h3>' 
                + '<p>' + session.lastMessage + '</p>';
                sessionListUL.appendChild(li);

                // 给 li 标签新增一个点击事件
                li.onclick = function(){
                    // 这个写法就能保证 点击哪个 li 标签
                    // 此处对应 clickSession 函数的参数就能拿到哪个 li 标签
                    clickSession(li); 
                }
            }

        }
    });
}

getSessionList();
function clickSession(currentLi){
    // 1. 设置高亮
    let allLis = document.querySelectorAll('#session-list>li')
    activeSession(allLis, currentLi);
    // 2. 获取指定会话的 历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi){
    // 这里的循环遍历，更主要的目的是取消未被选中的 li 标签的 className
    for(let li of allLis){
        if(li == currentLi){
            li.className = 'selected';
        }else{
            li.ckassName = '';
        }
    }
}

function getHistoryMessage(sessionId){
    // TODO
}